<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>阳光福利</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

	<!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

	<!-- 固定的css 和 common.js 的引用    -->
	<link rel="stylesheet" href="https://gitee.com/huaflower/CommonTraderUnionFile/raw/master/css/sm.min.css">
	<link rel="stylesheet" href="https://gitee.com/huaflower/CommonTraderUnionFile/raw/master/css/sm-extend.min.css">
	<link href="https://cdn.bootcss.com/Swiper/4.0.6/css/swiper.min.css" rel="stylesheet">
	<script type="text/javascript" src="https://gitee.com/huaflower/CommonTraderUnionFile/raw/master/common/js/common.js"></script>

	<style type="text/css">
  	/*css 的样式都放在这里*/

  	body{padding: 0;margin: 0}
        .swiper-slide{width: auto!important;}
        .topmenu{height: auto;background-color: white;border-bottom: 1px solid #CCCCCC;padding: 0 10px;line-height: 35px;font-family: "微软雅黑"}

  	.infinite-scroll-preloader {
        margin-top:-20px;
  	}
	#message{
		display: flex;
		justify-content:space-around;
		font-weight: 700;
	}
	.message_block{
		width: 50%;
		text-align: center;
		padding-top: 1rem;
		padding-bottom: 1rem;
		border: solid 1px #D8D8D8;
	}
	#label{
		/*width: auto;*/
		display: flex;
		justify-content:flex-start;
	}
	.label_list{
		width: 4rem;
		border: solid 1px red;
	}
	#list_ul{
		display: flex;
		flex-wrap: wrap;
	}
	.goods_list{
		border:solid 1px #E0E0E0;
		padding-top:5px;
        padding-bottom:5px;
        width: 50%;
	}

	.goods img{
		width: 80%;
		height:100px;
		/*height: 60%;*/
		/*height: 5rem;*/
	}
	.price{
		display: flex;
		justify-content: space-between;
	}
	.name,.price{
		padding-left: 10%;
		padding-right: 10%;
	}
	#goods_img{
		text-align: center;
	}
	.swiper-slide{
		/*border: solid 1px #E0E0E0;*/
		border-left: solid 1px #E0E0E0;
		border-right: solid 1px #E0E0E0;;
		/*border: solid 1px red;*/
		/*margin-right: 0px;*/
		/*margin-left: 0px;*/
		/*padding-left: 15px;*/
		/*padding-right: 15px;*/
		padding: 0.1rem 0.6rem;
	}
	.topmenu{
		padding: 0px;
	}
	.list-block ul{
		padding:1rem 0;
	}
	.jifen_color{
		color: red;
	}
	.price_style{
		color: darkgray;
		/*text-decoration:line-through;*/
	}
	#zongjifen{
		color: red;
		font-size: 18px;
	}
	/*.content,.infinite-scroll,*/
	.list-block{
	  margin: 0 0 1.75rem 0;
	 }

	 .top_tips{
	 	width: 100%;
	 	background-color: black;
	 	color:white;
	 	position: absolute;
	 	float: top;
	 	padding-top: 2px;
	 	padding-bottom: 2px;
	 	opacity:0.55;
	 	transform: translateY(-110px);
	 }
</style>


</head>
<body>
<div class="page-group">
	<div class="page page-current">
		<!-- html代码内容区域 -->
		<!--<div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
          	<div class="list-block">
              	<ul class="list-container">
              	</ul>
          	</div>-->
		<!-- 加载提示符 -->
		<!--<div class="infinite-scroll-preloader">
            <div class="preloader"></div>
       </div>
    </div>-->
		<div id="main" style="background-color: white;" >
			<!--积分信息-->
			<!--商品标签-->
			<!--<div id="label">
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
            </div>-->

			<!--商品列表-->
			<div id="list">
				<!--<ul class = "content" id = "list_ul">
                  <li class="goods_list">
                      <div class="goods">
                          <div id="goods_img">
                              <img src="../img/btn_downfile.jpg"/>
                          </div>
                          <div id="">
                              <div id="" class="name">
                                  火龙果
                              </div>
                              <div class="price">
                                  <span id="">
                                      50积分
                                  </span>
                                  <span id="">
                                      100积分
                                  </span>
                              </div>
                          </div>
                      </div>
                  </li>
                </ul>-->
				<div class="content infinite-scroll infinite-scroll-bottom" id="addlength" data-distance="0" style="">
					<div class="list-block">
						<ul class="list-container" id="list_ul">
							<!-- <li class="goods_list">
                                <div class="goods">
                                    <div id="goods_img">
                                        <img src="../img/btn_downfile.jpg"/>
                                        <div class="top_tips">提货券专用</div>
                                    </div>
                                    <div id="">
                                        <div id="" class="name">
                                            火龙果
                                        </div>
                                        <div class="price">
                                            <span id="">
                                                50积分
                                            </span>
                                            <span id="">
                                                100积分
                                            </span>
                                        </div>
                                    </div>
                                </div>
                          </li> -->

						</ul>
					</div>
					<!-- 加载提示符 -->
					<div class="infinite-scroll-preloader">
						<div class="preloader"></div>
					</div>
				</div>
			</div>
			<!--<input type="button" onclick="button()" name="" id="" value="按钮" />-->
		</div>


	</div>
</div>





<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<script type="text/javascript" src="https://gitee.com/huaflower/CommonScoreShop/raw/master/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script src="https://cdn.bootcss.com/Swiper/4.0.6/js/swiper.min.js"></script>
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/CommonScoreShop/raw/master/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/CommonScoreShop/raw/master/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/CommonScoreShop/raw/master/js/sm-extend.min.js' charset='utf-8'></script>
<!-- <script type="text/javascript" src="../common/common.js"></script> -->

<script type="text/javascript">
// 函数区域，函数放在“初始化区域的上面”
	var start = 0;
    var count = 10;
    var kind;
    var arraydata = new Array();
//  var str_end="";
    var jiazainum;
    var shangpingArray = new Array();
    var arraycanshu = 0;
    var scoremain;
	// 加载flag
      var loading = false;
      // 最多可加载的条目
      var maxItems = 100;
      // 每次加载添加多少条目
      var itemsPerLoad = 10;
      // 上次加载的序号

      var lastIndex = 20;


      function getParams(data){
	    // data需要转成json调用 ，函数urlParamParseJson();
 		kind = data;
			start = 0;
	 		shangpingArray = new Array();
	 		arraycanshu = 0;
	 		$$("#list_ul").html("");
            requestData();

  	}



      // 注册'infinite'事件处理函数
      $(document).on('infinite', '.infinite-scroll-bottom',function() {


      	if(!loading && arraydata.length >= count){//只有没有正在加载中  和 非最后一次的滑动都请求加载数据，防止滑动多次加载
      		loading = true;
			requestData();

      	}
            $.refreshScroller();
      });




//	商品回调接口
    function requestData(){
//  	console.log(start);
//		kind默认值为1

		var params;
		if(isNotNull(kind)){
				params = {
				callbacktype:'productlist',
				kind:kind,
				start:start,
				count:count

			}
		}else{

			params = {
				callbacktype:'productlist',
				start:start,
				count:count
			}
		}

        net_request('get','productlist',params,successCallback,errorCallBack);
    }


    function successCallback(data){
    	if(typeof(data) != "undefined"){
    		console.log(data);
    		if(data.callbacktype == 'productlist'){//商品列表回调
    			friendsSuccess(data);
    		}else if(data.callbacktype == 'dicts'){//字典回调
    			biaoqianSuccess(data);
    		}

    	}

    }


    //接口成功回调
    function friendsSuccess(data){
        if(typeof(data) != "undefined"){
//          console.log(data);
//          console.log(data.data[0]);
			arraydata = new Array();
			loading = false;//回调加载完毕

            if(isNotNull(data.body)){
            	arraydata = data.body;
//          	str_end = "";
            	jiazainum = arraydata.length;

            	if(isNotNull(arraydata)&&arraydata.length>0){

              		start = arraydata.length+start;
                    // alert(count);
					$$("#list_ul").html("");
                    for(var q=0;q<arraydata.length;q++){
                		var book_img = "";
                		var book_name = "";
                		var book_price = "";
                		var book_type ="";
                		var strtips = "";
                		shangpingArray[arraycanshu]=arraydata[q];

                		if(isNotNull(arraydata[q].img)){
                			book_img=arraydata[q].img
                		}

                		if(isNotNull(arraydata[q].name)){
                			book_name = arraydata[q].name;
                		}

                		if(isNotNull(arraydata[q].price)){
                			book_price = "￥"+arraydata[q].price;
                		}

                		if(isNotNull(arraydata[q].redeem) && arraydata[q].redeem == '1'){
                			// strtips = '<div class="top_tips">提货券专用</div>';
                		}
//              		book_price = "￥90";
//              		else if(arraydata[q].price==0){
//              			book_price = "0";
//              		}else if(arraydata[q].price=='0'){
//              			book_price = "0";
//              		}
//              		alert(book_price);

                		if(isNotNull(arraydata[q].score)){
                			book_type = '<span class="jifen_color">'+arraydata[q].score+'</span><span>积分</span>';
                		}

                		if(isNotNull(arraydata[q].redeem) && arraydata[q].redeem == '1'){
                			book_type = '<span class="jifen_color">1</span><span>提货券</span>';
                		}
//              		else if(arraydata[q].score==0){
//              			book_type = "0";
//              		}else if(arraydata[q].score=='0'){
//              			book_type = "0";
//              		}
                		var str = '\
							<li class="goods_list" onclick="onshangpin(this)" numcan="'+arraycanshu+'">\
							          	<div class="goods">\
							          		<div id="goods_img">\
							          			<img src="'+book_img+'" width="150" height="150"/>\
							          			'+strtips+'\
							          		</div>\
							          		<div id="">\
							          			<div id="" class="name">'+book_name+'</div>\
							          			<div class="price">\
							          				<span>'+book_type+'</span>\
							          				<span class="price_style" hidden>'+book_price+'</span>\
							          			</div>\
							          		</div>\
							          	</div>\
							          </li>\
							          ';
						$$("#list_ul").append(str);
//						str_end = str_end + str;
						arraycanshu++;
                    	}
// 						console.log(shangpingArray);
                	}

                	//if (jiazainum < count) {
	                // 加载完毕，则注销无限加载事件，以防不必要的加载
                  	// $.detachInfiniteScroll($('.infinite-scroll'));
                  	// 删除加载提示符
                  	$('.infinite-scroll-preloader').remove();
                  	//return;
            		//}
            }else{
            	if(start == 0){
            		$('.infinite-scroll-preloader').remove();
					$$("#list_ul").html('<div style="text-align: center;width:100%;">该类中暂无商品可兑换</div>');
            	}

            }
        }
    }
	function errorCallBack(data){
		console.log(data);
	}

	function onshangpin(onthis){
//		console.log(shangpingArray);
		var chuancan = shangpingArray[$$(onthis).attr("numcan")];
		chuancan.userscore = scoremain;
		var params = JSON.stringify(chuancan);
		native_goto('local/shangpinxiangqing?item='+params);
//		console.log(params+"===");
	}

	// 初始化区域
    $(function () {

        $.init();
    });
  
</script>
</body>
</html>